Javascript Introduction
Comments in Javascript
Javascript Variables
Difference between var, let and const in Javascript
Datatypes
Assignment Operators
Logical Operators
Comparison Operators
Actions alert, prompt & confirm

Javascript Flow Control
Conditional Statements in Javascript
Nullish coalescing operator in Javascript
Break and Continue in Javascript
Loops in javascript
for loop in Javascript
while loop

Javascript Functions
Javascript Functions
JavaScript Arrow Function

Javascript Objects
Javascript Objects

Javascript Array
Javascript Arrays

Javascript Error Handling
Error Handling in Javascript

Javascript ES6
Set
Javascript Spread Operator
Rest Parameter in Javascript

Javascript Asynchronous
Javascript Callback Function
Promises in Javascript
Promise Chaining
Async-Await in Javascript

Javascript DOM
DOM Document
DOM Elements
DOM Attributes
DOM Manipulation
DOM Node Lists
Javascript Events
DOM Traversing Elements
DOM EventListener

Javascript Class
Classes in javascript
Class Inheritance

Javascript Design Principles
SOLID - The Single responsibility principle in javascript
SOLID - Open-Closed principle in Javascript

Other Topics
Javascript Hoisting
Filter, Map and Reduce functions in Javascript
Closure in Javascript
Optional chaining operator in Javascript
Consoling in table format in javascript
Fetch API in Javascript
HTML web Storage API
Checking the online or offline status of the browser

Javascript Events

Published on: July 03, 2021 By T.Andrew Rayan

The events in javascript is used to handle or react to any actions in Html elements. Whenever any event takes place in HTML elements, if we need to take any actions for it, we use javascript events.

Examples of Html events:

*) Button click event

*) Input text change event.

*) Page load event.

Example of button click event:

        
  <html>
  <script>
    function printMessage() {
        console.log("Button Clicked");
    }
</script>
  <body>
  <input type="button" onclick="printMessage()" value="Print"/>
  </div>
  </html>
  
  
    

When clicking on the button we would call a function named printMessage and prints Button Clicked to the console. This is wired by the onclick event.

Example of Input change event:

        
  <html>
  <script>
    function printValue($event) {
        console.log($event.target.value);
    }
</script>
  <body>
  <input type="text" onchange="printValue(event)"/>
  </div>
  </html>
  
  
    

In the above example when we type some values to the input control and take the cursor out of the input control, it will print the value in the input control.

Example of keydown event:

        
  <html>
  <script>
    function printValue($event) {
        console.log($event.target.value);
    }
</script>
  <body>
  <input type="text" onkeydown="printValue(event)"/>
  </div>
  </html>
  
  
    

The onkeydown event is triggered whenever a key is pressed on the keyboard. Here whenever we type some values in the input text control then the value will be printed to the control.

Example for page load event:

        
  <html>
  <script>
    function onLoad() {
        alert("Page loaded successfully");
    }
</script>
  <body onload="onLoad()">
  <p> This is an example of page load event</p>
  </div>
  </html>
  
  
    

In the above example we have used onload event to call the onLoad() function when the html page is loaded.

Example for mouse events:

        
  <html>
  <script>
    function onMouseOver() {
        document.getElementById("para").style.color = "red";
    }

    function onMouseOut() {
        document.getElementById("para").style.color = "black";
    }
</script>
  <body>
  <p id="para" onmouseover="onMouseOver()" onmouseout="onMouseOut()">Place your mouse over me and out of me</p>
  </div>
  </html>
  
  
    

We have two mouse events for identifying the mouse over and mouser out events. The onmouseover event is used to identify the mouseover event and onmouseout event is used to identify the mouseout event.

In the above example, when we place the mouse on the p element, the color of the element changes to red and when we move away from the element then its color is restored to black color.

Javascript Events

Published on: July 03, 2021 By T.Andrew Rayan

Categories

Most Read